<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>参数显示</title>
    <link href="{{ url_for('static',filename='css/1.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery.js') }}"></script>
    <script>
		    $(document).ready(function () {
		        var whei = $(window).width()
		        $("html").css({ fontSize: whei / 24 });
		        $(window).resize(function () {
		            var whei = $(window).width();
		            $("html").css({ fontSize: whei / 24 })
		        });
		    });
		$(document).ready(function() {
		  var intervalId = setInterval(function() {
		    $.ajax({
		      url: '/send',
		      success: function(data) {
		        var time = data.time;
		        var vgx = data.vgx;
		        var vgy = data.vgy;
		        var vgz = data.vgz;
		        var h = data.h;
		        var pitch = data.pitch;
		        var roll = data.roll;
		        var yaw = data.yaw;
		        var templ = data.templ;
		        var temph = data.temph;
		        var bat = data.bat;
		        var agx = data.agx;
		        var agy = data.agy;
		        var agz = data.agz;

		        $('#time').html(time);
		        $('#vgx').html(vgx + 'dm/s');
		        $('#vgy').html(vgy + 'dm/s');
		        $('#vgz').html(vgz + 'dm/s');
		        $('#h').html(h + 'cm');
		        $('#pitch').html(pitch + '°');
		        $('#roll').html(roll + '°');
		        $('#yaw').html(yaw + '°');
		        $('#temperatures').html(templ + '℃-' + temph + '℃');
		        $('#agx').html(agx + 'cm/s²');
		        $('#agy').html(agy + 'cm/s²');
		        $('#agz').html(agz + 'cm/s²');
		        $('#battery_value').html(bat + '%');
		        const batteryLevelElement = $('#battery_level');
				batteryLevelElement.css('width', bat + '%');
		      }
		    });
		    $.ajax({
		      url: '/cmd_log',
		      success: function(data) {
		        var cmd = data.cmd;
		        $('#cmd_log').append('<p>'+cmd+'</p>');
		      }
		    });
		  }, 1000);
		});
				document.addEventListener('DOMContentLoaded', function() {
				const toggleBtn = document.getElementById('toggle_btn');
				const leftSidebar = document.querySelector('.left');

				toggleBtn.addEventListener('click', function() {
					leftSidebar.classList.toggle('collapsed');

					const leftElements = leftSidebar.querySelectorAll('.transition');
					leftElements.forEach(function(element) {
						element.classList.toggle('collapsed');
					});
				});
			});
			document.addEventListener('DOMContentLoaded', function() {
                // 获取 cmd_log 元素
                var cmdLog = document.getElementById("cmd_log");

                // 每次 cmd_log 元素内容变化时，将其滚动条位置设置为最下面
                function scrollToBottom() {
                  cmdLog.scrollTop = cmdLog.scrollHeight;
                }

                // 将 scrollToBottom 函数绑定到 cmd_log 元素的内容变化事件上
                cmdLog.addEventListener("DOMSubtreeModified", scrollToBottom);

                // 首次加载页面时，将滚动条位置设置为最下面
                scrollToBottom();

            });


    </script>
</head>
<body>
<div class="main">
    <aside class="left">
        <div id="msg_container">
            <table class="a">
                <tr>
                    <td rowspan="1">
                        <img id="time_img" src="{{ url_for('static',filename='img/time.png') }}" width="80%">
                    </td>
                    <td>
                        当前时间:
                    </td>
                    <td>
                        <div id="time"></div>
                    </td>
                </tr>
            </table>
            <table class="b">
                <tr>
                    <td rowspan="3">
                        <img id="xyzv_img" src="{{ url_for('static',filename='img/xyz.png') }}" width="80%">
                    </td>
                    <td>
                        x轴速度:
                    </td>
                    <td>
                        <div id="vgx"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        y轴速度:
                    </td>
                    <td>
                        <div id="vgy"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        z轴速度:
                    </td>
                    <td>
                        <div id="vgz"></div>
                    </td>
                </tr>
            </table>
            <table class="c">
                <tr>
                    <td>
                        <img id="temp_img" src="{{ url_for('static',filename='img/temp.png') }}" width="80%">
                    </td>
                    <td>
                        温度:
                    </td>
                    <td>
                        <div id="temperatures"></div>
                    </td>
                </tr>
            </table>
            <table class="d">
                <tr>
                    <td>
                        <img id="height_img" src="{{ url_for('static',filename='img/height.png') }}" width="80%">
                    </td>
                    <td>
                        相对高度:
                    </td>
                    <td>
                        <div id="h"></div>
                    </td>
                </tr>
            </table>
            <table class="e">
                <tr>
                    <td rowspan="3">
                        <img id="xyza_img" src="{{ url_for('static',filename='img/xyz.png') }}" width="80%">
                    </td>
                    </td>
                    <td>
                        x轴加速度:
                    </td>
                    <td>
                        <div id="agx"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        y轴加速度:
                    </td>
                    <td>
                        <div id="agy"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        z轴加速度:
                    </td>
                    <td>
                        <div id="agz"></div>
                    </td>
                </tr>

            </table>
        </div>
        <div id="cmd_log">
        </div>
    </aside>
    <section class="right">
        <div class="button_wrapper">
            <button id="toggle_btn">></button>
        </div>
        <div class="head">
            <img height="100%" id="header_img" src="{{ url_for('static',filename='img/header.jpg') }}">
            <div id="Slogan">
                弱小和无知不是我们的组名，<strong>傲慢</strong>才是!
            </div>
            <table border="0" class="bat" class="bat">
                <tr>
                    <td>
                        <img id="drone" src="{{ url_for('static',filename='img/drone.png') }}">
                    </td>
                    <td>
                        <div id="battary_container">
                            <div id="battery_level"></div>
                        </div>
                    </td>
                    <td>
                        <div id="battery_value"></div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="img_container">
            <img height="84%" id="video" src="{{ url_for('HUD') }}">
        </div>
    </section>
</div>
</body>
</html>
